<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>
    <div class="udukb">  <!--导栏-->
        <a href={% url 'index' %}><img src="{% static 'img/loog.png' %}" width="200px" height="60px"></a>
        <div class="aeuj">
            <ul>
                <li ><a href={% url 'index' %} class="yoqc">音乐馆</a></li>
                <li><a href={% url 'ujqi_rdtf' %}>音乐排行</a></li>
                <li><a href={% url 'wd' %}>我的音乐</a></li>
            </ul>
        </div>
        <div class="rtfp">
            <input type="text">
            <div><span class="layui-icon">&#xe615;</span></div>-
        </div>
        {% if current_etyn == None %}
          <a href={% url 'logn' %}><span>登录</span></a>
        {% else %}
        <div>
          <ul class="layui-nav" lay-bar="disabled">
            <li class="layui-nav-item" lay-unselect="">
              <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
              <dl class="layui-nav-child">
                <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        {% endif %}
    </div>
    <div class="ygsg">
        <div class="layui-carousel" id="test1">  <!--轮播-->
            <div carousel-item>
              {% for i in rtrh%}
              <div>
                <a href="{% url 'sm_yung' %}?id={{i.skma_id.skma_id}}"><img src="/media/{{i.lwrt_img}}" width="1080px" height="280px"></a>
              </div>
              {% endfor %}
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="layui-carousel" id="test2">  <!--歌单轮播-->
            <h1 align="center" class="skuj_h1">歌单推荐</h1>
            <div carousel-item>
              {% for i in ujrh%}
              <div>
                {% for j in i%}
                <div class="skuj_div">
                  <div class="skuj_div_a">
                    <a href="{% url 'uj_yung' %}?id={{j.skuj_id}}">
                      <img src="/media/{{j.skuj_img}}" class="skuj_img">
                      <img src="../static/img/rtyt.png" class="skuj_img1">
                    </a>
                  </div>
                  <a href=""><p>{{j.skuj_name}}</p></a>
                  <span class="do_span">播放量:{{j.rtytjgf}}</span>
                </div>
                {% endfor %}
              </div>
              {% endfor %}
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="layui-carousel" id="test3">  <!--歌曲轮播-->
            <h1 align="center">歌曲推荐</h1>
            <div carousel-item>
              {% for i in marh %}
              <div>
                <ul class="skmwrwad">
                  {% for j in i %}
                  <li class="skmw_li">
                    <div class="wvsg-li"><a href="{% url 'sm_yung' %}?id={{j.skma_id}}">
                      <img src="/media/{{j.skma_img}}" class="wvsg-img01">
                      <img src="../static/img/rtyt.png" class="wvsg-img02">
                    </a></div>
                    <a href="{% url 'sm_yung' %}?id={{j.skma_id}}"><p>{{j.skma_name}}</p></a>
                    <span class="do_span">{{j.jfta}}</span>
                  </li>
                  {% endfor %}
                </ul>
              </div>
              {% endfor %}
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
    </div>
</body>
<script>

    layui.use('carousel', function(){  //轮播
      var carousel = layui.carousel;
      //建造实例
      carousel.render({
        elem: '#test1'
        ,width: '100%' //设置容器宽度
        ,arrow: 'always' //始终显示箭头
      });
    });
    layui.use('carousel', function(){  //轮播
      var carousel = layui.carousel;
      //建造实例
      carousel.render({
        elem: '#test2'
        ,width: '100%' //设置容器宽度
        ,arrow: 'hover' //始终显示箭头
        ,autoplay: false
      });
    });
    layui.use('carousel', function(){  //轮播
      var carousel = layui.carousel;
      //建造实例
      carousel.render({
        elem: '#test3'
        ,width: '100%' //设置容器宽度
        ,arrow: 'hover' //始终显示箭头
        ,autoplay: false
      });
    });
</script>
<style>  
  .layui-nav{
    background-color:#ffffff;
  }
/* 头部导航栏 */
    .udukb{
        width:1080px;
        height:60px;
        margin:0 auto;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .aeuj ul{
        list-style: none;
    }
    .aeuj ul li{
        display: inline;
        padding-left:10px;
        padding-right: 10px;
        font-size: 18px;
    }
    .yoqc{
        color:#1E9FFF;
    }
    .rtfp input{
        height:25px;
        border: none;
        border-top:1px black solid;
        border-bottom:1px black solid;
        border-left:1px black solid;
        font-size: 16px;
    }
    .rtfp{
        display: flex;
    }
    .rtfp div{
        height:25px;
        width:20px;
        border-top:1px black solid;
        border-right:1px black solid;
        border-bottom:1px black solid;
        line-height: 25px;
    }
</style>
<style>
    .ygsg{
        width:1080px;
        margin:0 auto;
        padding-top: 10px;
    }
    .skuj_div{
      position: relative;
      width:200px;
      height:220px;
      margin-top:10px;
      float:left;
      margin-right:8px;
      margin-left:8px;
    }
    .skuj_div a p{
      margin:0px;
      padding:0px;
      font-size: 14px;
    }
    .skuj_div a p:hover{
      color:#5FB878;
    }
    .do_span{
      font-size: 13px;
      color:rgb(124, 124, 124);
    }
    .skuj_img{
      width:200px;
      height:190px;
      position: relative; 
      top:0px;  
      left:0px;
    }
    .skuj_div_a:hover .skuj_img{
      transform: scale(1.1);
      filter: brightness(80%);
    }
    .skuj_div_a{
      overflow: hidden;
      width:200px;
      height:190px;
    }
    .skuj_div_a:hover .skuj_img1{
      display: block;
    }
    .skuj_img1{
      position:absolute; 
      top:65px;  
      left:60px;
      width:80px;
      height:80px;
      display: none;
    }
    .skmwrwad{
      width:1080px;
      height:220px;
      float: left;
      margin-top:10px;
    }
    .skmw_li{
      width:330px;
      height: 65px;
      margin-left: 15px;
      margin-right: 15px;
      margin-top:4px;
      margin-bottom: 4px;
      float: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px rgba(122, 122, 122, 0.123) solid;
    }
    .skmw_li a p:hover{
      color: #5FB878;
    }
    .wvsg-li{
      width:70px;
      overflow: hidden;
      height:70px;
      position: relative;
    }
    .wvsg-img01{
      width:70px;
      height: 70px;
      position: relative;
      top:0px;  
      left:0px;
    }
    .wvsg-li:hover  .wvsg-img01{
      transform: scale(1.1);
      filter: brightness(80%);
    }
    .wvsg-img02{
      width: 25px;
      height: 25px;
      position: absolute;  
      top:25px;  
      display: none;
      left:20px;
    }
    .wvsg-li:hover  .wvsg-img02{
      display: block;
    }
</style>
</html>